<template>
  <!--分析报表-热力图(案场) -->
  <el-row style="height:100%">
    <page report="true">
      <div class="page-content report-con heatmapcon">
        <div class="reporthead">
          <div class="head-row">
            <span class="choice-title">所属企业：</span>
            <Cascader
              :value.sync="company_id_arr"
              :options.sync="companyOptions"
              :placeholder="'选择所属企业'"
              :width="'300px'"
              :changeEvent="'mallChange'"
              size="small"
            >
            </Cascader>

          </div>
          <div class="head-row" style="height:auto;min-height:36px;">
            <span class="choice-title">时间：</span>
            <div class="datecheck">
              <span>日期选择：</span>
              <el-date-picker
                v-model="datetimeval.day"
                type="daterange"
                align="right"
                unlink-panels
                popper-class="report-date"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                @change="dayChange"
              >
              </el-date-picker>
              <span style="margin-left: 28px;">时段选择：</span>
              <template>
                <el-time-picker
                  is-range
                  v-model="datetimeval.hm"
                  value-format="HH:mm"
                  format="HH:mm"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                  @change="timeChange">
                </el-time-picker>
              </template>
              <el-select v-model="TimeFast" placeholder="快速选择" @change="TimaFastChange" class="timefast">
                <el-option
                  v-for="item in TimeFastList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <el-button type="primary" size="small" class="back-now" @click="refresh()" icon="el-icon-refresh-left">当前时刻</el-button>
          </div>
          <div class="head-row site-row">
            <!--案场名称-->
            <span class="choice-title">{{option.caseTitle}}选择：</span>
              <div class="site">
              <el-select v-model="case_id"  @change="CaseChange"   filterable
                          size="small" placeholder="请选择位置" style="width:100%;">
                <el-option
                  v-for="item in caseInfoOptions"
                  :key="item.id"
                  :label="item.case_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="head-row site-row" style="margin-top:-10px;" >
            <!--楼层名称-->
            <span class="choice-title" style="vertical-align: top;margin-top:10px">{{option.areaTitle}}选择：</span>
            <div class="flooRradio">
                <el-radio-group v-model="floor_id" @change="floorChange">
                    <el-radio border v-for="(item,index) in floorList"  :key="index" :label="item.id">{{item.name}}</el-radio>
                </el-radio-group>
              <!-- <el-select v-model="floor_id"  @change="floorChange" filterable 
                         size="small" :placeholder="'请选择'+option.areaTitle" style="width:100%">
                <el-option
                  v-for="item in floorList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select> -->
            </div>
          </div>
        </div>
        
        <div class="hei13"></div>
        <heatMap :parmas="HeatMapData" ref="heatMap">
        </heatMap>
      </div>
    </page>
  </el-row>
</template>
<script>
  let moment = require("moment");
  import page from "@/components/page/page";
  import heatMap from "@/components/analyzeReport/reportpublic/heatmapdian";
  import Cascader from "@/components/sys/assembly/elcascader"; //级联选择器
  import reportGlobal from "@/components/global/reportGlobal";//公共配置

  export default {
    data() {
      return {
        company_id_arr:[],
        company_id:'',
        companyOptions:[],
        caseInfoOptions:[],
        case_id:'',
        floorList:[],
        floor_id:'',
        option:{
          caseTitle:'',
          areaTitle:''
        },
        HeatMapData:{},//reportHeatmap组件传参
        global:{},        //公共参数
        code:this.$route.query.code,        //通过菜单栏点击传过来的code判断使用的公共参数
        datetimeval:{
          day:[moment(new Date()).format("YYYY-MM-DD"),moment(new Date()).format("YYYY-MM-DD")],
          hm:[moment(new Date()).add(-5,'m').format("HH:mm"),moment(new Date()).format("HH:mm")]
        },
        pickerOptions: {                //时间日期控件规则
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;
          },
          shortcuts: [        //日期控件快捷选择方式
            {
              text: "今天",
              onClick(picker) {
                const start = moment().format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "昨天",
              onClick(picker) {
                const start = moment()
                .subtract(1, "days")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(1, "days")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "前天",
              onClick(picker) {
                const start = moment()
                .subtract(2, "days")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(2, "days")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上周同日",
              onClick(picker) {
                const start = moment()
                .subtract(1, "weeks")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(1, "weeks")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上月同日",
              onClick(picker) {
                const start = moment()
                .subtract(1, "months")
                .format("YYYY-MM-DD");
                const end = moment()
                .subtract(1, "months")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "本周",
              onClick(picker) {
                const weekOfday = moment().format("E"); //计算今天是这周第几天
                const start = moment()
                .subtract(weekOfday - 1, "days")
                .format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上一周",
              onClick(picker) {
                const start = moment()
                .week(moment().week() - 1)
                .startOf("week")
                .subtract(-1, "days")
                .format("YYYY-MM-DD");
                const end = moment()
                .week(moment().week() - 1)
                .endOf("week")
                .subtract(-1, "days")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "本月",
              onClick(picker) {
                const start = moment().month(moment().month()).startOf("month").format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上一月",
              onClick(picker) {
                const start = moment()
                .month(moment().month() - 1)
                .startOf("month")
                .format("YYYY-MM-DD");
                const end = moment()
                .month(moment().month() - 1)
                .endOf("month")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "本年度",
              onClick(picker) {
                const start = moment()
                .year(moment().year())
                .startOf("year")
                .format("YYYY-MM-DD");
                const end = moment().format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "上一年",
              onClick(picker) {
                const start = moment()
                .year(moment().year() - 1)
                .startOf("year")
                .format("YYYY-MM-DD");
                const end = moment()
                .year(moment().year() - 1)
                .endOf("year")
                .format("YYYY-MM-DD");
                picker.$emit("pick", [start, end]);
              }
            },
          ],
        },
        TimeFast:'',          //时间快速选择
        TimeFastList:[         //时间快速选择列表
          { label:'最近5分钟',value:'min5' },
          { label:'最近30分钟',value:'min30' },
          { label:'最近1小时',value:'hour1' },
          { label:'最近2小时',value:'hour2' },
          { label:'全天',value:'today' },
        ],
      }
    },
    components: {
      page,
      heatMap,
      Cascader
    },
    created() {
      for (let i in reportGlobal.queryList) {
        if (this.code == reportGlobal.queryList[i].code) {
          this.global = reportGlobal.queryList[i]
        }
      }
      this.option.caseTitle = this.global.caseTitle
      this.option.areaTitle = this.global.areaTitle

    },
    mounted() {
       //所属企业change事件
      this.$Bus.$on('mallChange',data =>{
        this.$Bus.$emit('Loading',true);
        this.company_id=data[data.length-1];
        this.getCaseInfo(data[data.length-1]);
      });
      this.getCompanyTree();
    },
    beforeDestroy(){
      this.$Bus.$off('mallChange');
    },
    methods:{
      //条件改变
      Updata(){
          this.$Bus.$emit('Loading',true)
          this.HeatMapData={
            case_id:this.case_id,
            floor_id:this.floor_id,
            start_day:this.datetimeval.day[0],
            end_day:this.datetimeval.day[1],
            start_hm:this.datetimeval.hm[0],
            end_hm:this.datetimeval.hm[1],
          }
          this.$refs.heatMap.upData(true,this.HeatMapData);
      },
      dayChange(val){
        this.Updata();
      },
      //时间change事件
      timeChange(val){
        if(val[0] == val[1]){
          this.$message.warning('起始时间不得等于终止时间')
          this.datetimeval.hm = ['00:00','23:59'];
          this.TimeFast='today';
        }
        this.Updata()
      },
      //时段快捷
      TimaFastChange(val){
        switch (val) {
          case "min5": {
            let str_hm = moment().subtract(5, 'minutes').format('HH:mm');
            let end_hm = moment().format('HH:mm');
            this.datetimeval.hm = [str_hm, end_hm];
            this.Updata();
            break;
          }
          case "min30": {
            let str_hm = moment().subtract(30, 'minutes').format('HH:mm');
            let end_hm = moment().format('HH:mm');
            this.datetimeval.hm = [str_hm, end_hm];
            this.Updata();
            break;
          }
          case "hour1": {
            let str_hm = moment().subtract(1, 'hours').format('HH:mm');
            let end_hm = moment().format('HH:mm');
            this.datetimeval.hm = [str_hm, end_hm];
            this.Updata();
            break;
          }
          case "hour2": {
            let str_hm = moment().subtract(2, 'hours').format('HH:mm');
            let end_hm = moment().format('HH:mm');
            this.datetimeval.hm = [str_hm, end_hm];
            this.Updata();
            break;
          }
          case "today": {
            this.datetimeval.hm = ["00:00", "23:59"];
            this.Updata(false, false);
            break;
          }
        }
      },
      //获取企业树
      getCompanyTree(){
        let url = '/sys/report_assist_new/company_tree';
        this.$api.get(url)
        .then(data => {
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            return
          }
          if(data){
            recursion(data.data);
            function recursion(val) {
              if(val.length){
                for(let i in val){
                  val[i].value = val[i].id;
                  val[i].label = val[i].company_name;
                  val[i].parent_id_str = val[i].parent_name_list ? val[i].parent_name_list.join('/') : '';
                  if(val[i].children && val[i].children.length){
                    recursion(val[i].children)
                  }else{
                    delete val[i].children
                  }
                }
              }
            }
            this.companyOptions = data.data;
            this.company_id = data.data[0].id
            this.company_id_arr.push(data.data[0].id);
            this.getCaseInfo(data.data[0].id);
          }
        })
        .catch(err=>{
          console.log(err,'企业');
          this.companyOptions = [];
        })
      },
      //获取案场列表
      getCaseInfo(id){
        let parmas={
          org_id_list:Array.of(id),
          org_type:1,
        }
        let url='/sys/report_assist_new/case_list';
        this.$api.post(url,parmas)
        .then(data => {
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            return
          }
          //判断接口返回正常
          if(data.data.length){
            this.caseInfoOptions = data.data;
            this.case_id=data.data[0].id;
            this.getfloorList(data.data[0].id);
          }else{
            this.caseInfoOptions = [];
            this.case_id="";
            this.floorList=[];
            this.floor_id='';
            this.$refs.heatMap.none();
            this.$message.warning('该企业下无' + this.option.caseTitle);
            this.$Bus.$emit('Loading',false)
          }
        })
        .catch(err=>{
          this.caseInfoOptions = [];
          this.case_id="";
          this.floorList=[];
          this.floor_id='';
          this.$refs.heatMap.none();
          this.$Bus.$emit('Loading',false)
        })
      },
      //案场改变
      CaseChange(val){
        this.$Bus.$emit('Loading',true);
        this.getfloorList(val);
      },
      //获取楼层
      getfloorList(id){
         let url='sys/report_assist_new/get-tags-by-caseinfo-id?tagType=4&caseInfoId='+id;
         this.$api.get(url)
         .then(data=>{
           if(data == '10001'){
             this.$message.error('无权操作该数据')
             return
           }
           if(data){
             let _data=data.data;
             if(_data.length){
               let mode;
               let arr=[];
               for(let i in _data)
               {
                 let mode={
                   id:_data[i].id,
                   name:_data[i].name
                 }
                 arr.push(mode);
               }
               this.floorList=arr;
               this.floor_id=arr[0].id;
               this.Updata();
             }
             else{
                this.$message.warning('该'+this.option.caseTitle+'下无' + this.option.areaTitle);
                this.$Bus.$emit('Loading',false);
                this.floorList=[];
                this.floor_id='';
                this.$refs.heatMap.none();
             }
           }
           else{
             this.floorList=[];
             this.floor_id='';
             this.$refs.heatMap.none();
             this.$Bus.$emit('Loading',false);
           }

         })
         .catch(err=>{
            console.log(err);
           this.$refs.heatMap.none();
           this.$Bus.$emit('Loading',false);
         })
      },
      //楼层改变
      floorChange(val){
        this.Updata();
      },
      //刷新 取最近5分钟时间
      refresh(){
        // this.datetimeval.day[0]=moment(new Date()).format("YYYY-MM-DD");
        // this.datetimeval.day[1]=moment(new Date()).format("YYYY-MM-DD");
        this.$set(this.datetimeval.day,0,moment(new Date()).format("YYYY-MM-DD"));
        this.$set(this.datetimeval.day,1,moment(new Date()).format("YYYY-MM-DD"));
        this.TimeFast='min5';
        this.TimaFastChange('min5');
      }
    },

  }
</script>
<style lang="scss">
  .heatmapcon {
    .reporthead {
      width: 100%;
      background: #fff;
      padding: 27px 0 20px 45px;
      .head-row {
        line-height: 36px;
        height: 36px;
        margin-bottom: 15px;
        .choice-title{
          display: inline-block;
          width: 85px;
          margin-right: 5px;
          text-align: left;
        }
        .flooRradio{
          display: inline-block;
          max-width: 85%;
          .el-radio-group{
            .el-radio{
              height: 35px;
              width: 110px;
              padding: 10px 20px 0 10px;
              margin:10px 10px 0 0;
            }
          }
        }
        .block{
          color: #777;
          span{
            margin-right: 2px;
          }
        }
        .back-now{
          margin-left:5px;
          span{
            font-width: 400;
            color:#fff;
          }
        }
        span {
          font-size: 14px;
          color: #777;
        }
        .datecheck {
          .el-input__inner {
            line-height: 36px;
            height: 36px;
            font-size: 14px;
            border-radius: 0;
            width: 250px;
            border-color: #e3eaf4;
            .el-input__icon {
              height: 36px;
              line-height: 36px;
              &.el-range__close-icon {
                display: none;
              }
            }
            .el-range-separator {
              height: 36px;
              line-height: 36px;
              padding: 0;
              width:6%;
            }
          }
          height: 36px;
          display: inline-block;
          .el-date-editor--date {
            .el-input__inner {
              border-radius: 0;
              border-color: #e3eaf4;
              height: 36px;
              line-height: 36px;
            }
            span,
            i {
              line-height: 36px;
            }
          }
          .timefast{
            width: 120px;
            .el-input__inner {
              padding: 0 20px;
              font-size: 14px;
              margin-left: -6px;
            }
          }
          .el-input--suffix {
            width: 120px;
            .el-input__inner {
              padding-right: 0;
              width: 120px;
            }
            .el-input__prefix {
              .el-input__icon {
                line-height: 36px;
                height: 36px;
              }
            }
            .el-input__suffix {
              line-height: 45px;
              vertical-align: middle;
              .el-input__suffix-inner{
                .el-icon-arrow-up.is-reverse{
                  margin-top: -2px;
                  display: block;
                }
              }
            }
          }
        }
        &.site-row {
          margin-bottom: 3px;
          position: relative;
          height: auto;
          > span {
            vertical-align: top;
          }
          .xiala {
            position: absolute;
            right: 20px;
            width: 80px;
            height: 36px;
            .iconfont {
              position: absolute;
              height: 36px;
              line-height: 38px;
              right: 10px;
            }
            .el-checkbox {
              width: 80px;
              height: 36px;
              line-height: 36px;
              padding: 0 10px 0 0;
              color: #000;
              .el-checkbox__input {
                display: none;
              }
              .el-checkbox__label {
                line-height: 36px;
                color: #000;
                padding: 0;
              }
            }

            border-radius: 2px;

            top: 0;
            text-align: center;
          }
          .site,
          .reheadselect {
            display: inline-block;
            width: 300px;
            transition: all 0.5s;
            overflow: hidden;
            &.siteopen{
              overflow-y:auto;
              &::-webkit-scrollbar {/*滚动条整体样式*/
                width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
                height: 5px;
                border-radius: 5px;
                scrollbar-arrow-color:red;
              }
              &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                border-radius: 5px;
                box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                background: rgba(0,0,0,0.2);
                scrollbar-arrow-color:red;
              }
              &::-webkit-scrollbar-track {/*滚动条里面轨道*/
                box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                background: rgba(0,0,0,0.1);
                border-radius: 5px;
              }
            }
            /*.el-checkbox,.el-radio {*/
            /*width: 182px;*/
            /*margin: 0 10px 15px 0;*/
            /*padding: 0;*/
            /*height: 36px;*/
            /*line-height: 36px;*/
            /*padding: 0;*/
            /*border-radius: 2px;*/
            /*text-align: center;*/
            /*border-color: #e3eaf4;*/
            /*&.is-checked {*/
            /*border-color: #5580ff;*/
            /*background: #5580ff;*/
            /*.el-checkbox__label ,.el-radio__label{*/
            /*color: #fff;*/
            /*}*/
            /*}*/

            /*&:hover {*/
            /*border-color: #5580ff;*/
            /*}*/
            /*.el-checkbox__input,.el-radio__input {*/
            /*display: none;*/
            /*}*/
            /*.el-checkbox__label,.el-radio__label {*/
            /*padding-left: 0;*/
            /*color: #000;*/
            /*}*/
            /*}*/
          }
        }
        &.show {
          > span {
            vertical-align: bottom;
          }
          height: 24px;
          line-height: 24px;
          .el-radio-group {
            height: 24px;
            line-height: 24px;
            .el-radio-button__inner {
              height: 24px;
              line-height: 22px;
              padding: 0;
              width: 50px;
              font-size: 12px;
            }
          }
          .reload {
            width: 26px;
            line-height: 24px;
            height: 24px;
            vertical-align: middle;
            padding: 0;
            display: inline-block;
            // background-color: #8EC5FC;
            // background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); 
            // border-color: #8EC5FC;


            background:#ffc02e;border-color:#ffc02e;

          }
        }
      }
    }
    &.report-con {
      padding: 0 0;
    }
    padding: 15px;
    .fr {
      float: right;
    }
    .el-table {
      margin-bottom: 10px;
    }
    .paging {
      margin: 15px;
      height: 28px;
    }
    .hei13 {
      height: 15px;
      width: 100%;
    }
  }
  .report-date.el-picker-panel{
    left: 215px !important;
    .el-picker-panel__sidebar {
      right: 0;
      width: 180px;
      text-align: center;
      &::before {
        content: "快速选择";
        width: 90%;
        height: 32px;
        margin: 8px 0;
        display: inline-block;
        font-size: 14px;
        line-height: 32px;
        border-radius: 3px;
        color: #fff;
        background: #6689f1;
        text-align: center;
      }
      .el-picker-panel__shortcut {
        text-align: center;
        display: inline-block;
        background: #f3f3f3;
        padding: 0;
        width: 40%;
        margin: 5px;
        &:hover {
          background: #5580ff;
          color: #fff;
        }
      }
    }
    .el-picker-panel__body {
      margin: 0 180px 0 0;
    }
  }
</style>

